<template>
  <div class="cart-icon" @click="goToCart">
    <el-badge :value="cartCount" :hidden="cartCount === 0" class="cart-badge">
      <el-icon :size="24"><ShoppingCart /></el-icon>
    </el-badge>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useCartStore } from '../store/cartStore'
import { ShoppingCart } from '@element-plus/icons-vue'

const router = useRouter()
const cartStore = useCartStore()

const cartCount = computed(() => cartStore.totalCount)

const goToCart = () => {
  router.push('/cart')
}
</script>

<style scoped>
.cart-icon {
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
}

.cart-icon:hover {
  color: var(--el-color-primary);
}

.cart-badge {
  margin-right: 16px;
}
</style>